<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleDialogClose"
    :lock-scroll="false"
    :class="{'mobile-el-dialog':showMobilePage}"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    class="subcribe-common-dialog small-common-dialog-size"
  >
    <DialogTitle title="编辑备注" font-size="16px" style="margin-bottom:20px;"/>
    <el-input
      :rows="5"
      v-model="contentText"
      resize="none"
      class="desc-textarea"
      type="textarea"
      maxlength="500"
      placeholder="请输入"/>
    <div class="dialog-footer">
      <el-button class="ok" type="primary" @click="handleConfirm">保存</el-button>
      <el-button class="cancel-btn-style" type="info" @click="handleDialogClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import DialogTitle from '@/components/Title';
import { mapState } from 'vuex';
export default {
  components: {
    DialogTitle
  },
  model: {
    prop: 'desc',
    event: 'change'
  },
  props: {
    desc: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    contentText: {
      get() {
        return this.desc;
      },
      set(val) {
        this.$emit('change', val);
      }
    }
  },
  methods: {
    handleDialogClose() {
      this.$emit('change', '');
      this.dialogVisible = false;
    },
    handleConfirm() {
      this.$emit('handleDescEdit');
      this.handleDialogClose();
    }
  }
};
</script>

<style lang="scss" scoped>
.form-content {
  & ::v-deep {
    .el-input__inner, .el-textarea__inner {
      &::-webkit-input-placeholder { /* WebKit browsers */
        color: #ddd;
        font-size: 14px;
      }
      &::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #ddd;
        font-size: 14px;
      }
      &:-ms-input-placeholder { /* Internet Explorer 10+ */
        color: #ddd;
        font-size: 14px;
      }
    }
  }
  .desc-textarea {
    ::v-deep textarea {
      padding-right: 5px;
      text-align: justify;
    }
  }
}
.title-tip {
  font-size: 12px;
  color: #999;
  font-weight: normal;
  margin-left: 10px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  .ok {
    width: 120px;
    font-size: 16px;
    padding: 8px 20px;
  }
  .cancel-btn-style {
    font-size: 14px;
    padding: 8px 20px;
    margin-left: 16px !important;
  }
}
::v-deep .el-form-item__content {
  width: 240px;
  margin-left: 0 !important;
  .el-input__suffix {
    display: flex;
    align-items: center;
  }
  .el-input__inner {
    height: 32px;
    line-height: 32px;
    width: 240px;
    font-size: 14px;
  }
}
::v-deep .el-form-item {
  display: flex;
  justify-content: center;
}
</style>
